@use "../../default" as theme;
@use "../../ResizeObserver/style/default";
@use "sass:math";
.pf-ScrollArea{
	position:relative;
	contain:strict;
}
.pf-ScrollArea_container{
	position:relative;
	width:100%;
	height:100%;
	overflow:auto;
	scrollbar-width:none;
	-ms-overflow-style:none;
	&::-webkit-scrollbar{
		width:0;
		height:0;
		display:none;
	}
}
.pf-ScrollArea_scroll{
	position:absolute;
	min-height:1px;
	min-width:1px;
}
.pf-ScrollArea_bar,.pf-ScrollArea_thumb{
	position:absolute;
	opacity:0.2;
	transition: opacity theme.$ScrollArea-transition;
	cursor:grab;
	&.pf--hidden{
		opacity:0 !important;
		pointer-events:none;
	}
}
.pf-ScrollArea_bar{
	&.pf--direction-x{
		left:0;
		right:0;
		bottom:0;
		height: theme.$ScrollArea-bar-size;
	}
	&.pf--direction-y{
		top:0;
		bottom:0;
		right:0;
		width: theme.$ScrollArea-bar-size;
	}
}
.pf-ScrollArea_thumb{
	background:#000;
	$-gap-size:math.div(theme.$ScrollArea-bar-size - theme.$ScrollArea-thumb-size,2);
	&:hover{
		opacity:0.3;
	}
	&:active{
		opacity:0.5;
	}
	&.pf--direction-x{
		bottom:$-gap-size;
		height: theme.$ScrollArea-thumb-size;
	}
	&.pf--direction-y{
		right:$-gap-size;
		width: theme.$ScrollArea-thumb-size;
	}
}